<template>
  <view class="performance-container">
    <!-- User info and date selector -->
    <view class="user-date-section">
      <view class="user-name">
        <text>{{ info.username }}</text>
      </view>
      <view class="date-selector" @click="handleDate">
        <text>{{ dayjs(date).locale('en').format("MMMM D, YYYY") }}</text>
        <image
          class="calendar-icon"
          src="/static/uniapp/duration.png"
          mode="aspectFit"
        ></image>
      </view>
    </view>
		<uv-calendars
        :date="date"
        ref="calendars"
        color="#17A364"
        @confirm="confirm"
      />
    <!-- Performance metrics table -->
    <view class="metrics-card">
      <view class="metrics-header">
        <text class="header-col index-name">Index name</text>
        <text class="header-col">On the day</text>
        <text class="header-col">This week</text>
        <text class="header-col">This month</text>
      </view>

      <!-- Service row -->
      <view class="metrics-row">
        <text class="metric-name">Service</text>
        <text class="metric-value">{{ detail.service.on_the_day }}</text>
        <text class="metric-value">{{ detail.service.on_the_week }}</text>
        <text class="metric-value">{{ detail.service.this_month }}</text>
      </view>

      <!-- Violation row -->
      <view class="metrics-row">
        <text class="metric-name">Violation</text>
        <text class="metric-value">{{ detail.violation.on_the_day }}</text>
        <text class="metric-value">{{ detail.violation.on_the_week }}</text>
        <text class="metric-value">{{ detail.violation.this_month }}</text>
      </view>

      <!-- Leave row -->
      <view class="metrics-row">
        <text class="metric-name">Leave</text>
        <text class="metric-value">{{ detail.leave.on_the_day }}</text>
        <text class="metric-value">{{ detail.leave.on_the_week }}</text>
        <text class="metric-value">{{ detail.leave.this_month }}</text>
      </view>

      <!-- KPI row -->
      <view class="metrics-row">
        <text class="metric-name">KPI</text>
        <text class="metric-value">{{ detail.kpi.on_the_day }}</text>
        <text class="metric-value">{{ detail.kpi.on_the_week }}</text>
        <text class="metric-value">{{ detail.kpi.this_month }}</text>
      </view>
    </view>

    <!-- Performance rating -->
    <view class="rating-card">
      <image class="emoji" :src="emigObj[detail.face]" mode="aspectFit"></image>
      <text class="rating-text">Excellent !</text>
    </view>

    <!-- Violation details -->
    <view class="violations-card">
      <view class="violation-item">
        <text class="violation-title"
          >Violation 1:
          <text class="violation-desc"
            >Not within the punching range when scanning code;</text
          ></text
        >
      </view>

      <view class="violation-item">
        <text class="violation-title"
          >Violation 2:
          <text class="violation-desc"
            >Not within the punching range when scanning code.</text
          ></text
        >
      </view>
    </view>
  </view>
</template>

<script>
import { getPerformance } from "@/api/home";
import { mapState } from "pinia";
import { useUserinfoStore } from "@/store/info";
import excellent from "/static/uniapp/excellent.png";
import Average from "/static/uniapp/Average.png";
import average1 from "/static/uniapp/average1.png";
import Poor from "/static/uniapp/Poor.png";
import dayjs from "dayjs";
export default {
  data() {
    return {
			dayjs: dayjs,
			date: dayjs().format("YYYY-MM-DD"),
			emigObj: {
				1: excellent,
				2: Average,
				3: average1,
				4: Poor,
			},
      detail: {
        face: 1,
        kpi: {},
        leave: {},
        service: {},
        violation: {},
      },
    };
  },
  computed: {
    ...mapState(useUserinfoStore, ["info"]),
  },
  created() {
		this.getData()
  },
  methods: {
		getData(){
			getPerformance({ date: this.date }).then((res) => {
				this.detail = res;
			});
		},
    handleDate() {
      this.$refs.calendars.open();
    },
		confirm(e){
			this.date = e.fulldate;
			this.getData();
		}
  },
};
</script>

<style>
page {
  background-color: #f5f5f5;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.performance-container {
  display: flex;
  flex-direction: column;
  /* padding-bottom: 120rpx; For tab bar */
}

/* User and Date section */
.user-date-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 40rpx;
  background-color: #f5f5f5;
}

.user-name {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
}

.date-selector {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 15rpx 30rpx;
  border-radius: 10rpx;
}

.calendar-icon {
  width: 50rpx;
  height: 50rpx;
  margin-left: 15rpx;
}

/* Metrics card */
.metrics-card {
  margin: 30rpx;
  background-color: #fff;
  border-radius: 20rpx;
  overflow: hidden;
}

.metrics-header {
  display: flex;
  padding: 30rpx 20rpx;
  border-bottom: 1px solid #f0f0f0;
}

.header-col {
  flex: 1;
  text-align: center;
  font-size: 24rpx;
  font-weight: 500;
  color: #333;
}

.index-name {
  text-align: left;
  padding-left: 20rpx;
}

.metrics-row {
  display: flex;
  padding: 30rpx 20rpx;
  border-bottom: 1px solid #f0f0f0;
}

.metric-name {
  flex: 1;
  text-align: left;
  padding-left: 20rpx;
  font-size: 30rpx;
  color: #333;
}

.metric-value {
  flex: 1;
  text-align: center;
  font-size: 30rpx;
  color: #333;
}

/* Rating card */
.rating-card {
  margin: 0 auto;
  background-color: #fff;
  border-radius: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx 0;
  width: 300rpx;
}

.emoji {
  width: 160rpx;
  height: 160rpx;
  margin-bottom: 20rpx;
}

.rating-text {
  font-size: 40rpx;
  font-weight: 600;
  color: #19b36e;
}

/* Violations card */
.violations-card {
  margin: 30rpx;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
}

.violation-item {
  margin-bottom: 20rpx;
}

.violation-title {
  font-size: 30rpx;
  color: #333;
}

.violation-desc {
  color: #ff4d4f;
}
</style>
